<template>
  <cover-view class="custom-tabbar">
    <cover-view class="item" v-for="item of tabbar" :key="item.id" @tap="tapItem(item.id)">
      <cover-image class="item-img" :src="item.selected?item.selectedImg:item.img"/>
      <cover-view class="item-text" :class="item.selected?'selected':''">{{item.text}}</cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  data () {
    return {
      tabbar: [
        { id: 0, path: '/pages/index/main', text: '首页', img: '/static/tabs/tab_home_nor@3x.png', selectedImg:'/static/tabs/tab_home_fill@3x.png', selected: true },
        { id: 1, path: '/pages/category/main', text: '分类', img: '/static/tabs/tab_classify_nor.png', selectedImg:'/static/tabs/tab_classify_fill@3x.png', selected: false },
        { id: 2, path: '/pages/cart/main', text: '购物车', img: '/static/tabs/tab_cart_nor@3x.png', selectedImg:'/static/tabs/tab_cart_fill@3x.png', selected: false },
        { id: 3, path: '/pages/my/main', text: '我', img: '/static/tabs/tab_my_nor@3x.png', selectedImg:'/static/tabs/tab_my_fill@3x.png', selected: false },
      ]
    }
  },
  methods: {
    tapItem (id) {
      this.tabbar.forEach(item => {
        item.selected = false
        if (item.id === id) {
          item.selected = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid #c22;
  // background-color: #391;
  .item {
    padding: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #aaa;
    background-color: #fefefe;
    .item-img {
      width: 30%;
      height: 60%;
    }
    .item-text {
      font-size: 28rpx;
    }
  }
}
.selected {
  color: #ff2d49;
}
</style>

